<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

    <title>个人信息</title>

    <link rel="stylesheet" href="/static/css-lib/bootstrap.min.css" />

    <style>
        .box-margin {
            margin-top: 10px;
        }

        .item-list {
            font-weight: bold;
        }

        .item-long-margin {
            margin-left: 25px;
        }

        .item-short-margin {
            margin-left: 10px;
        }

        .user-avatar {
            width: 200px;
        }

        ::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow   : inset 0 0 5px rgba(73, 78, 84, 0.2);
            background   : #535353;
        }
        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            box-shadow   : inset 0 0 5px rgba(73, 78, 84, 0.2);
            border-radius: 10px;
            background   : #ededed;
        }
    </style>
</head>
<body>
    <div class="container-fluid">

        <!-- 登录信息修改 -->
        <div class="panel panel-default box-margin">
            <div class="panel-heading">
                登录信息
            </div>
            <div class="panel-body list-group">
                <div class="list-group-item">
                    登录名
                    <span class="item-list item-short-margin">
                        <c:out value="${AdminInfo.name}" />
                    </span>
                </div>
                <div class="list-group-item">
                    密码
                    <span class="item-list item-long-margin">******</span>
                </div>
                <div class="list-group-item">
                    手机号
                    <span class="item-list item-short-margin">
                        <c:out value="${AdminInfo.phone}" />
                    </span>
                </div>
                <div class="list-group-item">
                    邮箱
                    <span class="item-list item-long-margin">
                        <c:out value="${AdminInfo.email}" />
                    </span>
                </div>
            </div>
            <div class="panel-footer">
                <button id="modifyLogin" type="button" class="btn btn-default">修改</button>
            </div>
        </div>

        <!-- 基本信息修改 -->
        <div class="panel panel-default box-margin">
            <div class="panel-heading">
                基本信息
            </div>
            <div class="panel-body list-group">
                <div class="list-group-item">
                    姓名
                    <span class="item-list item-short-margin">
                        <c:out value="${AdminInfo.realName}" />
                    </span>
                </div>
                <div class="list-group-item">
                    头像
                </div>
                <div class="list-group-item">
                    <c:choose>
                        <c:when test="${empty AdminInfo.avatar}">
                            <img src="/static/images/user-default-avatar.png" alt="用户头像" class="user-avatar" />
                        </c:when>
                        <c:otherwise>
                            <c:set var="adminAvatar" value="/utils/imgDisplay?img=${AdminInfo.avatar}" scope="page" />
                            <img src="<c:out value="${adminAvatar}"/>" alt="用户头像" class="user-avatar" />
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
            <div class="panel-footer">
                <button id="modifyBase" type="button" class="btn btn-default">修改</button>
            </div>
        </div>
    </div>

    <script>
        let modifyLoginBtn = document.getElementById("modifyLogin");
        let modifyBaseBtn = document.getElementById("modifyBase");

        /**
         * 修改登录信息
         */
        modifyLoginBtn.onclick = function () {
            window.location.href = "/admin/frame/update-login";
        };

        /**
         * 修改基本信息
         */
        modifyBaseBtn.onclick=  function () {
            window.location.href = "/admin/frame/update-base";
        }
    </script>
</body>
</html>